<template>
  <el-menu mode="horizontal" class="header-menus" :router="true">
    <el-menu-item index="/" id="home">首页</el-menu-item>
    <el-submenu index="/ranking">
      <template slot="title">排行榜</template>
      <el-menu-item index="/ranking/github">Github Hottest</el-menu-item>
      <el-menu-item index="/ranking/youtube">Youtube Hottest</el-menu-item>
      <el-menu-item index="/ranking/wechat">公众号榜单</el-menu-item>
      <el-menu-item index="/ranking/weibo">微博榜单</el-menu-item>
    </el-submenu>
    <el-submenu index="/BlogComp">
      <template slot="title">博客</template>
      <el-menu-item-group title="升学">
        <el-menu-item index="/blogs/kaoyan"> 考研</el-menu-item>
        <el-menu-item index="/blogs/liuxue"> 留学</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group>
        <template slot="title">技术</template>
        <el-menu-item index="/blogs/algorithm"> 算法</el-menu-item>
        <el-menu-item index="/blogs/compile"> 编译原理</el-menu-item>
        <el-menu-item index="/coding/documentations">API开发文档</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="语言">
        <el-menu-item index="/blogs/python"> Python</el-menu-item>
        <el-menu-item index="/blogs/javascript"> JavaScript</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="应用">
        <el-menu-item index="/blogs/scrape"> 爬虫</el-menu-item>
        <el-menu-item index="/blogs/visualization"> 可视化</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="/interact">
      <template slot="title">互动</template>
      <el-menu-item> 关于</el-menu-item>
      <el-menu-item> 合作</el-menu-item>
      <el-menu-item> 留言</el-menu-item>
      <el-menu-item> 更新日志</el-menu-item>
    </el-submenu>

    <div class="header-search">
      <div class="header-search-long">
        <el-input
          suffix-icon="el-icon-search"
          placeholder="大家都在搜：……"
          v-model="searchKey"
        ></el-input>
      </div>
      <div class="header-search-short">
        <i class="el-icon-search" style="font-size: 20px;"></i>
      </div>
    </div>
  </el-menu>
</template>
<script>
export default {
  name: 'MenuComp',
  data() {
    return {
      searchKey: '',
    }
  },
}
</script>

<style lang="scss" scoped>
@import '../../styles/base';

@media (max-width: $nc-screen-sm) {
  .header-search {
    display: none;
  }

  .el-menu /deep/ {
    .el-menu-item {
      min-width: 10px !important;
    }
    .el-menu--popup {
      min-width: 90px !important;
    }

    .el-menu-item-group__title {
      padding: 10px 0 !important;
      text-align: center !important;
      font-weight: 700 !important;
    }

    .el-submenu {
      .el-submenu__icon-arrow {
        display: none !important;
      }
    }
  }
}

@media (max-width: $nc-screen-md) {
  .header-search-long {
    display: none;
  }
}

@media (min-width: $nc-screen-md) {
  .header-search-short {
    display: none;
  }
}

.header-menus {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: none !important; // 覆盖el默认的菜单底阴影

  .el-input /deep/ {
    min-width: 100px;
    max-width: 200px;
    .el-input__inner {
      color: #84a1a8;
    }
    .el-input__suffix {
      display: flex;
      align-items: center;
    }
  }
}
</style>
